<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        var student = [
            {
                name: '张三',
                age: 18,
                status: false,
            },
            {
                name: '李四',
                age: 99,
                status: false,
            },
        ]

        var classRoom = [
            {
                name: '一班',
                id: 1,
            },
            {
                name: '二班',
                id: 2,
            },
        ]
        let local = {
            get: function (key) {
                let data = localStorage.getItem(key) //1.null 本地没有数据  2.有数据就是字符串 JSON.parse(data)
                if (data == null) {
                    return []
                } else {
                    return JSON.parse(data)
                }
            },
            set: function (key, value) {
                localStorage.setItem(key, JSON.stringify(value))
            },
            push: function (key, value) {
                let data = this.get(key)
                data.unshift(value)
                this.set(key, data)
            },
            del: function (key, index) {
                let data = this.get(key)
                data.splice(index, 1)
                this.set(key, data)
            },
        }
        local.get()
        local.set()
        local.push()
        local.del()

        //更新数据
        // 数据来源： 1.默认的数据，也就是写死的数据
        //           2.用户自己添加的数据（打开页面之后没有数据，用户手动通过表单添加的 1.ajax添加到服务器，2添加到本地存储）
        //           3.本地存储的数据（之前访问过页面产生的数据，保存到本地存储的）
        //           4.服务器端返回的数据（可以存到本地，方便下次访问直接获取本地数据）
        // 本地存储有什么作用：
        //     1. 可以保留之前的数据
        //     2. 就可以增加用户体验，有时候网络的不太好的时候，可以先显示本地存储的数据，然后等ajax请求成功之后再更新数据
        //     3. 保存用户登录凭证信息
        //     4. 给服务器减少压力
        //页面加载之后
        // 1. 检查本地存储内有没有数据 如果有数据就使用本地存储的数据，如果没有
        //
    </script>
</html>
